<template>
  <section>
    <el-collapse v-model="activeName" accordion v-if="orderList">
      <el-collapse-item  :name="order.id" v-for="order in orderList" :key="order.id" v-if="orderList.length>0">
        <template slot="title">
          <div  class="title">
            <div class="time">{{getTime(order.created)}}</div>
            <div class="sn">{{order.sn}}</div>
            <div class="state">
              {{stateList.find(s=>s.id === order.state).name}}
            </div>
          </div>
        </template>

        <template slot-scope="scope">
          <el-table :data="order.orderItems" class="table" border >
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column label="规格" prop="title" width="300"></el-table-column>
            <el-table-column label="售价" width="150">
              <template slot-scope="scope">
                <div class="price-box">
                  <span class="pay-fee" style="color:red">¥{{scope.row.price.toFixed(2)}}</span>
                  <span class="price" style="text-decoration: line-through">¥{{scope.row.originalPrice.toFixed(2)}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="编码" prop="sn" width="230"/>
            <el-table-column label="数量" prop="num" width="70"/>
            <el-table-column label="小计" prop="num" >
              <template slot-scope="scope">
                <span >¥{{(scope.row.price * scope.row.num).toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="优惠" prop="discountFee">
              <template slot-scope="scope">
                <span class="pay-fee" style="color:red">¥{{scope.row.discountFee.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="实付" prop="totalPrice">
              <template slot-scope="scope">
                <span class="pay-fee" style="color:red">¥{{scope.row.payFee.toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="border:0px solid red;margin-top: 10px" type="flex" justify="end">
            <el-col :span="4">
              <el-button size="mini" @click="btnPay(order)" v-if="order.state === 0" type="primary">收款</el-button>
              <el-button size="mini" @click="orderDetailBtn(order)">订单详情</el-button>
            </el-col>
          </el-row>
        </template>

      </el-collapse-item>
    </el-collapse>
    <div v-else>暂无数据</div>
    <el-dialog  title="订单详情" :visible.sync="showDetailDialog" >
      <order-detail :orderId="orderId" v-on:toPay="btnPay"></order-detail>
    </el-dialog>
    <el-dialog  title="订单支付" :visible.sync="orderPayDialog" >
      <order-pay :orderId="orderId" v-on:cancel="orderPayDialog=false"></order-pay>
    </el-dialog>
  </section>
</template>

<script>
  import orderPay from './orderPay'
  import orderDetail from './orderDetail'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "orderList",
    props:['orderList'],
    components:{orderDetail,orderPay},
    data(){
      return{
        activeName:null,
        stateList:[
          {name:'待支付',id:0},
          {name:'已支付',id:1},
          {name:'已取消',id:2},
          {name:'已完成',id:4},
        ],
        showDetailDialog:false,
        orderId:null,
        orderPayDialog:false,
      }
    },
    watch:{
      orderList(nv,ov){
        if(nv){
          if(nv.length>0)
            this.init(nv)
        }
      },
      activeName(nv,ov){
        console.log(this.orderList.find(o=>o.id == nv))
      }
    },
    created(){
      if(this.orderList.length >0)
        this.init(this.orderList)
    },
    methods: {
      // ...mapActions({
      //   fetch: 'fetch'
      // }),
      getTime(t){
        return dateFormater.formatDatetime(t)
      },
      init(array){
        // this.activeName=array[0].id
      },
      orderDetailBtn(order){
        console.log('看一下当前订单-----',order)
        this.orderId=order.id
        this.showDetailDialog=true
      },
      btnPay(order){
        console.log('看下订单的payNo-----',order)
        this.orderId=order.id
        this.orderPayDialog=true
      },
      toPayByPay(payNo){
        this.showDetailDialog=false
        //跳转到支付页面
        console.log('跳转！')
        this.$router.push('/pay/toPay'+payNo)
      }
    }
  }
</script>

<style scoped>
  .title{
    display: flex;
    flex-direction: row;
  }
  .time,.sn{
    width: 150px;
  }
  .table{
    /*border: 1px solid red;*/
    box-shadow:0 0 20px #eee;
    margin-top: 10px;
    width: 98%;
    margin: 0 auto;
  }
  .price-box{
    display: flex;
    flex-direction: column;
  }
  .pay-fee{
    font-weight: bold;
  }
</style>
